<template>
	<view class="page-view flex flex-direction">
		<cu-custom ref="cuCustom" :isBack="true">
			<template slot="backText">
				试题
			</template>
		</cu-custom>
		<view class="tabs flex">
			<view v-for="(item, index) in tabs" :key="index" @tap="tabsChange(index)" :class="{ active: tabsCur == index }" class="tabs-item flex-sub padding flex align-center">
				<image :src="`/static/${index == 1 ? 'e' : 's'}-icon${tabsCur == index ? '-cur' : ''}.png`" mode="widthFix"></image>
				<text>{{ item }}</text>
			</view>
		</view>
		<view class="tabbar flex justify-around">
			<view v-for="(item, index) in tabsCur == 0 ? tab1 : tab2" :key="index" @tap="tabChange(index)" :class="{ active: tabCur == index }" class="tab-item  text-center">
				<text>{{ item }}</text>
			</view>
		</view>
		<scroll-view class="english-question" scroll-y="true" v-if="tabsCur == 1 && tabCur == 0">
			{{ questionList['en1'][0].content || '' }}
			<image
				v-if="questionList['en1'] && questionList['en1'][0].contentImgs"
				@tap="ViewImage(fileUrl + questionList['en1'][0].contentImgs)"
				:src="fileUrl + questionList['en1'][0].contentImgs"
				mode="widthFix"
			></image>
		</scroll-view>
		<view class="flex-sub" style="overflow: auto;">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :current="questionIndex" @change="change">
				<!-- <block v-for="(item, index) in showquelist" :key="index">
					<swiper-item :key="index + '_' + subindex" v-for="(subitem, subindex) in questionList[item]">
						<view class="swiper-item questions-item flex flex-direction" v-if="index == tabCur">
							<scroll-view class="flex-sub" style="min-height: 0;" scroll-y="true">
								<view class="question-info">
									<view class="number">第{{ subitem.code | filterCode }}题</view>
									<template v-if="!(tabsCur == 1 && tabCur == 0)">
										<view class="content" v-if="subitem.content">{{ subitem.content }}</view>
										<view class="imgbox" v-if="subitem.contentImgs" @tap="ViewImage(fileUrl + subitem.contentImgs)">
											<image :src="fileUrl + subitem.contentImgs" :data-url="fileUrl + subitem.contentImgs" mode="widthFix"></image>
										</view>
									</template>
									<view class="answers">
										<view :class="{ 'text-green': subitem.answer == select.value }" v-for="(select, sindex) in subitem.selects" :key="sindex">
											{{ select.value }}:{{ select.text }}
										</view>
									</view>
									<view class="trueAnswer" v-if="subitem.answer">正确答案 {{ subitem.answer }}</view>
								</view>
								<view class="analysis" v-if="subitem.analysis || subitem.analysisImgs">
									<view class="analysis-title flex align-center">
										<image src="../../static/analysis.png" mode="widthFix"></image>
										<text>题目解析</text>
									</view>
									<view class="analysis-content">{{ subitem.analysis || '' }}</view>
									<view class="imgbox" v-if="subitem.analysisImgs" @tap="ViewImage(fileUrl + subitem.analysisImgs)">
										<image :src="fileUrl + subitem.analysisImgs" mode="widthFix"></image>
									</view>
								</view>
							</scroll-view>
							<view class="toolbar flex align-center justify-between" v-if="subitem.selectCount > 0">
								<button class="answerTrue btn" :class="{ active: subitem.operateType == 'success' }" @tap="responde('success', index, subindex)"></button>
								<button class="answerFalse btn" :class="{ active: subitem.operateType == 'error' }" @tap="responde('error', index, subindex)"></button>
								<view>已完成{{ hasAnswerNum }}/{{ tabsCur == 0 ? gztotal : entotal }}</view>
							</view>
							<view class="scoresAnswer flex align-center justify-between" v-else>
								<text>本题满分{{ subitem.scores }}分</text>
								<view class="flex align-center">
									<text>自评分：</text>
									<view class="inputbox">
										<input type="number" v-if="!hideInput" :value="subitem.operateType" @change="e => changeNum(e, index, subindex)" @input="e => inputNum(e, index, subindex)" />
									</view>
								</view>
								<view class="text-gray">已完成{{ hasAnswerNum }}/{{ tabsCur == 0 ? gztotal : entotal }}</view>
							</view>
						</view>
					</swiper-item>
				</block> -->
				<swiper-item :key="subindex" v-for="(subitem, subindex) in swiperlist">
					<view class="swiper-item questions-item flex flex-direction" v-if="subindex < questionIndex + 2 && subindex > questionIndex - 2">
						<scroll-view class="flex-sub" style="min-height: 0;" scroll-y="true">
							<view class="question-info">
								<view class="number">第{{ subitem.sort }}题</view>
								<template v-if="!(tabsCur == 1 && tabCur == 0)">
									<view class="content" v-if="subitem.content">{{ subitem.content }}</view>
									<view class="imgbox" v-if="subitem.contentImgs" @tap="ViewImage(fileUrl + subitem.contentImgs)">
										<image :src="fileUrl + subitem.contentImgs" :data-url="fileUrl + subitem.contentImgs" mode="widthFix"></image>
									</view>
								</template>
								<view class="answers">
									<view :class="{ 'text-green': subitem.answer == select.value }" v-for="(select, sindex) in subitem.selects" :key="sindex">
										{{ select.value }}:{{ select.text }}
									</view>
								</view>
								<view class="trueAnswer" v-if="subitem.answer">正确答案 {{ subitem.answer }}</view>
							</view>
							<view class="analysis" v-if="subitem.analysis || subitem.analysisImgs">
								<view class="analysis-title flex align-center">
									<image src="../../static/analysis.png" mode="widthFix"></image>
									<text>题目解析</text>
								</view>
								<view class="analysis-content">{{ subitem.analysis || '' }}</view>
								<view class="imgbox" v-if="subitem.analysisImgs" @tap="ViewImage(fileUrl + subitem.analysisImgs)">
									<image :src="fileUrl + subitem.analysisImgs" mode="widthFix"></image>
								</view>
							</view>
						</scroll-view>
						<view class="toolbar flex align-center justify-between" v-if="subitem.selectCount > 0">
							<button class="answerTrue btn" :class="{ active: subitem.operateType == 'success' }" @tap="responde('success', subitem.typeIndex, subitem.index)"></button>
							<button class="answerFalse btn" :class="{ active: subitem.operateType == 'error' }" @tap="responde('error', subitem.typeIndex, subitem.index)"></button>
							<view>已完成{{ hasAnswerNum }}/{{ tabsCur == 0 ? gztotal : entotal }}</view>
						</view>
						<view class="scoresAnswer flex align-center justify-between" v-else>
							<text>本题满分{{ subitem.scores }}分</text>
							<view class="flex align-center">
								<text>自评分：</text>
								<view class="inputbox">
									<input
										type="number"
										v-if="!hideInput"
										:value="subitem.operateType"
										@change="e => changeNum(e, subitem.typeIndex, subitem.index)"
										@input="e => inputNum(e, subitem.typeIndex, subitem.index)"
									/>
								</view>
							</view>
							<view class="text-gray">已完成{{ hasAnswerNum }}/{{ tabsCur == 0 ? gztotal : entotal }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottom-operate"><view class="defaultBtn" @tap="viewScore" data-target="Modal">交卷</view></view>
		<view class="cu-modal" :class="isShow ? 'show' : ''">
			<view class="cu-dialog">
				<image src="../../static/win.png" mode="widthFix"></image>
				<view class="modal-con">
					<view class="title">还没答完题，确定要交卷？</view>
					<view class="operate flex justify-between">
						<button class="submitBtn flex-sub" @click="submit">确定</button>
						<button class="defaultBtn flex-sub" @click="hideModal">取消</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let tab1 = ['问题求解', '条件充分性判断', '逻辑推理', '写作'];
let tab2 = ['完型填空', '阅读理解', '翻译', '写作'];
let allow = true;
import questionItem from '@/components/questionItem.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'answer',
	mixins: [MescrollMixin],
	components: {
		questionItem
	},
	data() {
		return {
			tabs: ['综合能力', '英语 (二)'],
			tabsCur: 0,
			questionIndex: 0, //题目序号
			tabCur: 0,
			navTop: 0,
			questionList: {},
			isShow: false,
			quelist: ['gz1', 'gz2', 'gz3', 'gz4'],
			enquelist: ['en1', 'en2', 'en3', 'en4'],
			heightlist: [],
			fileUrl: 'https://apps.guoyamba.com/',
			enScore: 0,
			en1Score: 0,
			en2Score: 0,
			en3Score: 0,
			en4Score: 0,
			gzScore: 0,
			gz1Score: 0,
			gz2Score: 0,
			gz3Score: 0,
			gz4Score: 0,
			isClick: false,
			total: 0,
			gztotal: 0,
			entotal: 0,
			tab1,
			tab2,
			savelist: {},
			hideInput: false,
			showquelist: [],
			isRestEstimate: false //是否重新估分
		};
	},
	computed: {
		// showquelist() {
		// 	return this.tabsCur == 0 ? this.quelist : this.enquelist;
		// },
		swiperlist() {
			let list = [];
			for (var i = 0; i < this.showquelist.length; i++) {
				if (this.questionList && this.questionList[this.showquelist[i]]) {
					this.questionList[this.showquelist[i]].forEach((item, index) => {
						item.typeIndex = this.showquelist[i];
						item.index = index;
					});
					list = list.concat(this.questionList[this.showquelist[i]]);
				}
			}
			return list;
		},
		/* 已经回答的题目 */
		hasAnswerNum() {
			let total = 0;
			for (var i = 0; i < this.showquelist.length; i++) {
				if (this.questionList && this.questionList[this.showquelist[i]]) {
					for (var j = 0; j < this.questionList[this.showquelist[i]].length; j++) {
						var item = this.questionList[this.showquelist[i]][j];
						if (item.operateType !== '') {
							total++;
						}
					}
				}
			}
			return total;
		},
		...mapState(['openid', 'queStateList'])
	},
	onLoad(options) {
		this.tabsCur = options && options.type == 'en' ? 1 : 0;
		this.isRestEstimate = !!options.isRestEstimate;
		this.showquelist = this.tabsCur == 0 ? [...this.quelist] : [...this.enquelist];
		this.getQuestion();
	},
	created() {},
	methods: {
		...mapMutations(['setscorelist', 'saveQueState']),
		tabsChange(index) {
			this.tabsCur = index;
			this.tabCur = 0;
			this.questionIndex = 0;
			this.total = this.tabsCur == 0 ? this.gztotal : this.entotal;
			this.showquelist = this.tabsCur == 0 ? [...this.quelist] : [...this.enquelist];
		},
		tabChange(index) {
			this.tabCur = index;
			let list = this.showquelist.slice(0, this.tabCur);
			var total = 0;
			for (var i = 0; i < list.length; i++) {
				total = total + this.questionList[list[i]].length;
			}
			this.questionIndex = total;
		},
		//查看分数和排名
		viewScore(e) {
			console.log('savelist', this.savelist);
			this.CalAllScore();
			/* 先判断是否做完了 */
			if (this.total == this.hasAnswerNum) {
				this.submit();
			} else {
				this.isShow = true;
			}
		},
		//确定交卷
		submit() {
			this.isShow = false;
			let { en1Score, en2Score, en3Score, en4Score, gz1Score, gz2Score, gz3Score, gz4Score, enScore, gzScore } = this;
			this.setscorelist({ en1Score, en2Score, en3Score, en4Score, gz1Score, gz2Score, gz3Score, gz4Score, enScore, gzScore });
			/* 需要保存一次估分状态，以免重新估分时出现问题 */
			this.saveQueState(this.savelist);
			uni.redirectTo({
				url: '/pages/answerResult/answerResult'
			});
		},
		hideModal(e) {
			this.isShow = false;
		},

		//作答
		responde(val, index, subindex) {
			this.questionList[index][subindex].operateType = val;
			/* 保存答题状况 */
			this.savelist[index][subindex] = val;
			if (this.questionIndex + 1 < this.total) {
				this.questionIndex++;
				/* 判断tab是否改变 */
				let list = this.showquelist.slice(0, this.showquelist.length);
				var total = 0;
				for (var i = 0; i < list.length; i++) {
					if (this.questionIndex >= total && this.questionIndex < total + this.questionList[list[i]].length && this.tabCur != i) {
						this.tabCur = i;
					}
					total = total + this.questionList[list[i]].length;
				}
			} else {
				/* 最后一题，如果是综合且不是重新估分，跳转到英语 */
				if (!this.isRestEstimate && this.tabsCur == 0) {
					this.tabsChange(1);
				}
			}
			// this.CalAllScore();
		},
		inputNum(val, index, subindex) {
			let scores = this.questionList[index][subindex].scores;
			if (parseInt(val.detail.value) > scores) {
				this.questionList[index][subindex].operateType = '';
				this.hideInput = true;
				setTimeout(() => {
					this.hideInput = false;
				}, 100);
				uni.showToast({
					title: '请输入正确的估分',
					icon: 'none'
				});
			}
		},
		changeNum(val, index, subindex) {
			let scores = this.questionList[index][subindex].scores;
			if (parseInt(val.detail.value) > scores) {
				this.questionList[index][subindex].operateType = '';
				this.hideInput = true;
				setTimeout(() => {
					this.hideInput = false;
				}, 100);
				uni.showToast({
					title: '请输入正确的估分',
					icon: 'none'
				});
				return false;
			}
			if (val.detail.value != '') {
				let score = parseInt(val.detail.value) > scores ? scores : parseInt(val.detail.value);
				this.responde(score, index, subindex);
			}
		},
		CalAllScore() {
			this.en1Score = this.CalScore('en1');
			this.en2Score = this.CalScore('en2');
			this.en3Score = this.CalScore('en3');
			this.en4Score = this.CalScore('en4');
			this.gz1Score = this.CalScore('gz1');
			this.gz2Score = this.CalScore('gz2');
			this.gz3Score = this.CalScore('gz3');
			this.gz4Score = this.CalScore('gz4');
			this.gzScore = this.gz1Score + this.gz2Score + this.gz3Score + this.gz4Score;
			this.enScore = this.en1Score + this.en2Score + this.en3Score + this.en4Score;
		},
		CalScore(key) {
			return this.questionList[key].reduce(function(prev, cur, index, arr) {
				let curScore = 0;
				if (cur.selectCount <= 0) {
					curScore = cur.operateType - 0 || 0;
				} else {
					curScore = cur.operateType == 'success' ? cur.scores : 0;
				}
				return prev + curScore;
			}, 0);
		},
		getQuestion() {
			this.$getajax(this.$api.getQuestion).then(da => {
				this.questionList = {};
				let savelist = {};
				if (da.code == 200 && da.data) {
					for (var key in da.data) {
						savelist[key] = [];
						da.data[key].forEach((item, index) => {
							let value = '';
							if (this.queStateList[key] && this.queStateList[key][index]) {
								value = this.queStateList[key][index];
							}
							item.operateType = value;
							savelist[key][index] = value;
						});
					}
					this.questionList = da.data;
					/* 计算英语总题数 */
					let entotal = this.enquelist.reduce((total, item) => {
						return total + (this.questionList && this.questionList[item] && this.questionList[item].length ? this.questionList[item].length : 0);
					}, 0);
					this.entotal = entotal;
					/* 计算综合总题数 */
					let gztotal = this.quelist.reduce((total, item) => {
						return total + (this.questionList && this.questionList[item] && this.questionList[item].length ? this.questionList[item].length : 0);
					}, 0);
					this.gztotal = gztotal;
					this.total = this.tabsCur == 0 ? this.gztotal : this.entotal;
				}
				this.savelist = { ...savelist };
			});
		},
		//预览图片
		ViewImage(img) {
			uni.previewImage({
				urls: [img],
				current: img
			});
		},
		change(event) {
			if (event.detail.source == 'touch') {
				this.questionIndex = event.detail.current;
			}
			/* 判断tab是否改变 */
			let list = this.showquelist.slice(0, this.showquelist.length);
			var total = 0;
			for (var i = 0; i < list.length; i++) {
				if (this.questionIndex >= total && this.questionIndex < total + this.questionList[list[i]].length && this.tabCur != i) {
					this.tabCur = i;
				}
				total = total + this.questionList[list[i]].length;
			}
		}
	},
	filters: {
		filterCode(val) {
			if (val) {
				let str = val.split('_');
				return str[str.length - 1];
			} else {
				return 0;
			}
		}
	},

	onShareAppMessage(res) {
		var url = '/pages/index/index';
		return {
			title: '果芽MBA MEM MPA 联考估分',
			path: url,
			imageUrl: 'https://apps.guoyamba.com/share01.png'
		};
	}
};
</script>

<style lang="scss">
page,
.page-view {
	height: 100%;
	position: relative;
	background: #fafafa;
}
.tabs {
	margin: 10rpx 16rpx;
	.tabs-item {
		background: url(../../static/tab-bg.png) no-repeat center center;
		color: #000;
		font-size: 40rpx;
		padding-left: 40rpx;
		image {
			display: block;
			width: 53rpx;
			height: 60rpx;
			margin-right: 18rpx;
		}
		& + .tabs-item {
			margin-left: 5rpx;
			image {
				width: 60rpx;
			}
		}
	}
	.tabs-item.active {
		background-image: url(../../static/tab-bg-cur.png);
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.3);
		color: #fff;
		position: relative;
		&::after {
			display: block;
			content: '';
			width: 33rpx;
			height: 33rpx;
			background: url(../../static/tab-down.png) no-repeat center center;
			background-size: cover;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
.tabbar {
	background-color: #fff;
	margin: 0 16rpx;
	.tab-item {
		color: #171717;
		line-height: 65rpx;
		font-size: 24rpx;
		min-width: 153rpx;
		position: relative;
		padding: 0 30rpx;
		& + .tab-item::before {
			position: absolute;
			content: '';
			display: block;
			background: #9e9e9e;
			width: 2rpx;
			height: 28rpx;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		&.active {
			color: #db6855;
			& > text {
				position: relative;
				display: inline-block;
				height: 65rpx;
				&::after {
					position: absolute;
					content: '';
					display: block;
					height: 6rpx;
					left: 0;
					right: 0;
					background: #db6855;
					bottom: 0;
				}
			}
		}
	}
}
.english-question {
	background: #fff;
	color: #0f0f0f;
	font-size: 18rpx;
	line-height: 24rpx;
	max-height: 164rpx;
	margin: 24rpx 70rpx 0;
	width: auto;
	padding: 10rpx 20rpx;
}
.swiper {
	height: 100%;
	color: #000;
	font-size: 24rpx;
	line-height: 35rpx;
	.questions-item {
		padding: 40rpx 0;
		margin: 0 45rpx;
		letter-spacing: 5rpx;
		height: 100%;
		.question-info {
			padding: 0 14rpx;
			border-bottom: 2rpx solid #bfbfbf;
		}
		.content {
			background-image: url(../../static/shuiyin.png);
			background-size: 100% auto;
		}
		.number {
			font-size: 27rpx;
			margin-bottom: 20rpx;
		}
		.text-green {
			color: #09bb07;
		}
		.answers > view {
			padding: 10rpx 0;
			line-height: 1.2;
		}
		.trueAnswer {
			padding: 40rpx 0;
			font-size: 27rpx;
			color: #09bb07;
		}
		.spec-answers {
			& > view {
				padding: 30rpx 0;
				border-bottom: 2rpx solid #000;
				color: #000;
			}
		}

		.analysis {
			.analysis-title {
				image {
					width: 37rpx;
					height: 33rpx;
					margin-right: 5rpx;
				}
				color: #db6553;
				font-size: 27rpx;
				margin: 30rpx 0 20rpx;
			}
		}
		.scoresAnswer {
			padding-top: 40rpx;
			font-size: 27rpx;
			color: #de715d;
			.text-grey {
				color: #666;
			}
			.inputbox {
				width: 90rpx;
				border: 1px solid #585858;
				text-align: center;
				height: 44rpx;
			}
			input {
				border: none;
				height: 44rpx;
				width: 90rpx;
			}
		}
		.toolbar {
			padding-top: 40rpx;
			font-size: 27rpx;
			color: #666;
			.btn {
				width: 214rpx;
				height: 54rpx;
				background: url(../../static/true1.png) no-repeat center center;
				background-size: contain;
				display: block;
				border-radius: 0;
				margin: 0;
				&::after {
					opacity: 0;
				}
				&.answerTrue.active {
					background-image: url(../../static/true.png);
				}
				&.answerFalse {
					background-image: url(../../static/false1.png);
					&.active {
						background-image: url(../../static/false.png);
					}
				}
			}
			.nextbtn {
				width: 112rpx;
				height: 52rpx;
				background: #bdbdbd;
				color: #373737;
				border-radius: 20rpx;
				text-align: center;
				line-height: 52rpx;
			}
		}
	}
}
.questions {
	padding: 0 40rpx 40rpx;
	.questions-item {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		.number {
			background: #db6553;
			color: #fff;
			border-radius: 8rpx;
		}
		.text {
			margin: 10rpx 0 30rpx;
		}
		.trueAnswer {
			background: #db6553;
			color: #fff;
			border-radius: 20rpx;
			margin: 20upx 0;
			width: 200upx;
			text-align: center;
			line-height: 60upx;
		}
		image {
			display: block;
			max-width: 100%;
			width: auto;
		}
		.operate {
			.btn {
				color: #2c405a;
				text-align: center;
				border-radius: 8upx;
				background: #fff;
				height: 50upx;
				line-height: 50upx;
				font-size: 28upx;
				border: 2rpx solid #2c405a;
				display: block;
			}
			.btn + .btn {
				margin-left: 118upx;
			}
			.btn.success {
				background: #39b54a;
				color: #fff;
				border: 2rpx solid #39b54a;
			}
			.btn.error {
				background: #db6553;
				color: #fff;
				border: 2rpx solid #db6553;
			}
		}

		.mark {
			width: 100%;
			padding: 10rpx;
			background: #dddddd;
			border-radius: 8rpx;
			text {
				line-height: 1.4rem;
			}
			.input-number {
				background-color: #fff;
				border-radius: 8rpx;
				padding: 0 10rpx;
				margin-left: 10rpx;
			}
		}
	}
	.questions-item:not(:last-child) {
		border-bottom: 2rpx solid #aaaaaa;
	}
}
.bottom-operate {
	width: 100%;
	z-index: 9999;
	.defaultBtn {
		border-radius: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}
}
.cu-dialog {
	width: 462rpx;
	height: 528rpx;
	background: none;
	color: #fff;
	font-size: 33rpx;
	text-align: center;
	& > image {
		display: block;
		width: 100%;
		height: 100%;
	}
}
.modal-con {
	position: absolute;
	top: 260rpx;
	left: 0;
	right: 0;
	.operate {
		margin: 100rpx 40rpx;
		button + button {
			margin-left: 20rpx;
		}
		.defaultBtn,
		.submitBtn {
			margin-top: 30rpx;
			line-height: 51rpx;
			width: 161rpx;
			border-radius: 15rpx;
			font-size: 36rpx;
			letter-spacing: 10rpx;
			background: linear-gradient(to right, #ff9b4f, #f66412);
		}
	}
}
</style>
